<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        display: flex;
        flex-direction: column;
        height: 410px;
    }
    
    .header {
        flex: 1;
    }
    
    .footer {
        flex-basis: 100px;
        background: red;
    }
</style>

<body>

    <div class="box">
        <div class="header">
            这是头部，
        </div>
        <div class="footer">
            这是底部
        </div>
    </div>

</body>

</html>

<script>
    // let aa1 = (...args) => {
    //     let bb = [].slice.call(arguments, 0)
    //     let a = arguments[0]
    //     let b = arguments[1]
    //     let c = arguments[2]
    //     console.log(a + b + c)
    // }

    // 正常的函数
    let aa = function(...args) {
        console.log(args)
        let bb = args.slice(0)
            //  let bb = [].slice.call(arguments, 0)
        console.log(bb)
        let a = arguments[0]
        let b = arguments[1]
        let c = arguments[2]
        console.log(a + b + c)
    }
    aa(1, 5, 7)
        // aa1(1, 2, 3)
        // function deepCopy(obj) {

    //     var newObj = Array.isArray(obj) ? [] : {};


    //     if (obj && typeof obj === 'object') {

    //         for (let key in obj) {

    //             if (obj.hasOwnProperty(key)) {

    //                 if (obj[key] && typeof obj[key] === 'object') {

    //                     newObj[key] = deepCopy(obj[key])
    //                 } else {

    //                     newObj[key] = obj[key]
    //                 }

    //             }
    //         }
    //     }

    //     return newObj;
    // }
    // let obj1 = {
    //     fruits: ['apple', 'bandan']
    // }
    // var obj2 = deepCopy(obj1);

    // obj2.fruits[0] = 'orange';


    // console.log(obj1.fruits)
    // console.log(obj2.fruits)


    // const curry = (fn, ...args) => {
    //     // console.log(args)
    //     const length = fn.length;
    //     // let allArgs = Array.prototype.slice.call(args, 1)
    //     return (...rest) => {
    //         // console.log(rest)
    //         let allArgs = args.slice(0);
    //         console.log(allArgs)
    //         let newArg = allArgs.push(...rest)
    //         console.dir(newArg) //2
    //         if (newArg.length >= length) {
    //             fn(args)
    //         } else {
    //             curry.call(fn, args)
    //         }

    //     }
    // }


    // function add(a, b, c, d) {

    //     return a + b + c + d
    // }



    // const arrq = curry(add, 2);

    // const sum = arrq(3)(4)(5);

    // console.log(sum)


    /**
     * 转换函数
     * @param {*} fn 目标函数
     * @param  {...any} args 其他参数
    //  */
    // const createCurry = (fn, ...args) => {
    //     // 获取目标函数的参数个数
    //     let length = fn.length;

    //     return (...rest) => {
    //         // 将已有的参数和新的参数合并
    //         let allArgs = args.slice(0);
    //         // console.log(args)
    //         //[2]
    //         //[2, 3]
    //         //[2, 3, 4]
    //         allArgs.push(...rest);
    //         // console.log(allArgs)
    //         // 若参数个数已经满足目标函数的参数要求，则执行目标函数。否则继续返回转换函数
    //         if (allArgs.length < length) {
    //             // console.log(this)
    //             //windwo
    //             return createCurry.call(this, fn, ...allArgs)
    //         } else {
    //             // return fn.call(this, ...allArgs)
    //             return fn.apply(this, allArgs)
    //         }

    //     }
    // }
    // const createCurry = (fn, ...args) => {
    //     return (...rest) => {
    //         let allArgs = args.slice(0);
    //         allArgs.push(...rest)
    //             // 触发条件
    //         if (rest.length !== 0) {
    //             return createCurry.call(this, fn, ...allArgs)
    //         } else {
    //             return fn.apply(this, allArgs)
    //         }

    //     }
    // }

    // function add(a, b, c, d) {
    //     return a + b + c + d;
    // };
    // const curryAdd = createCurry(add);
    // console.log(curryAdd(1)(2)(3)(4)(5)()) // 10


    // const curryAdd = createCurry(add, 2);
    // const sum = curryAdd(3)(4)(5)(6);

    //console.log(sum) // 14

    // const createCurry = (fn, ...args) => {
    //     return (...rest) => {
    //         let allArgs = args.slice(0);
    //         allArgs.push(...rest)
    //             // 触发条件
    //         if (rest.length !== 0) {

    //             console.log(this)
    //             return createCurry.call(this, fn, ...allArgs)
    //         } else {
    //             return fn.apply(this, allArgs)
    //         }

    //     }
    // }

    // function add(a, b, c, d) {
    //     return a + b + c + d;
    // };
    // const curryAdd = createCurry(add);
    // console.log(curryAdd(1)(2)(3)(4)()) // 10


    // Function.prototype.mycall = function(context) {
    //     //因为这里是bar.call2,bar 调用了 call2, 所以 用this可以获取 bar 函数
    //     context.fn = this;
    //     var args = [];

    //     for (var i = 1; i < arguments.length; i++) {

    //         // args.push(arguments[i])
    //         args.push('arguments[' + i + ']');
    //     }
    //     var result = eval('context.fn(' + args + ')');
    //     console.log(result)
    //     console.log(args) //["arguments[0]", "arguments[1]", "arguments[2]"]
    //         //console.log(args)  //[{…}, "kk", 18]
    //     delete context.fn;
    // }
    // var foo = {
    //     value: 1
    // };

    // function bar(name, age) {
    //     console.log(name)
    //     console.log(age)
    //     console.log(this.value);

    // }
    // bar.mycall(foo, 'kk', 18)
    //     //因为这里是bar.call2,bar 调用了 call2, 所以 用this可以获取 bar 函数



    // var args = ["a1", "b2", "c3"];
    // args.join(',')
    // console.log(args.join(','));
    // 第三版
    // Function.prototype.call2 = function(context) {
    //     context = context ? Object(context) : window; // 实现细节 1 和 2
    //     context.fn = this;

    //     var args = [];
    //     for (var i = 1, len = arguments.length; i < len; i++) {
    //         args.push('arguments[' + i + ']');
    //     }

    //     var result = eval('context.fn(' + args + ')');

    //     delete context.fn
    //     return result; // 实现细节 2
    // }

    // // 测试一下
    // var value = 2;

    // var obj = {
    //     value: 1
    // }

    // function bar(name, age) {
    //     console.log(this.value);
    //     return {
    //         value: this.value,
    //         name: name,
    //         age: age
    //     }
    // }

    // function foo() {
    //     console.log(this);
    // }

    // bar.call2(null); // 2
    // foo.call2(123); // Number {123, fn: ƒ}

    // bar.call2(obj, 'kevin', 18);
    // 1
    // {
    //    value: 1,
    //    name: 'kevin',
    //    age: 18
    // }

    // function baz() {
    //     // 当前调用栈是：baz
    //     // 因此，当前调用位置是全局作用域
    //     console.log(this)
    //     console.log("baz");
    //     bar(); // <-- bar的调用位置
    //     function bar() {
    //         // 当前调用栈是：baz --> bar
    //         // 因此，当前调用位置在baz中
    //         console.log(this)
    //         console.log("bar");
    //         foo(); // <-- foo的调用位置
    //     }
    // }



    // function foo() {
    //     // 当前调用栈是：baz --> bar --> foo
    //     // 因此，当前调用位置在bar中
    //     console.log(this)
    //     console.log("foo");
    // }

    // baz(); // <-- baz的调用位置

    // function foo() {
    //     console.log(this.a);
    // }

    // var a = 2;
    // var o = {
    //     a: 3,
    //     foo: foo
    // };
    // var p = {
    //     a: 4
    // };

    // o.foo(); // 3
    // (p.foo = o.foo)(); // 2
    // function foo() {
    //     //var self = this; // lexical capture of this
    //     console.log(this)
    //     setTimeout(function() {

    //         console.log(this.a); // self只是继承了foo()函数的this绑定
    //     }, 100);
    // }

    // var obj = {
    //     a: 2
    // };
    // var a = 3

    // foo(); // 2
    // var a = 2;
    // var b = 3;
    // var c = 4;
    // a + b || a + c

    // // 函数式写法
    // var calc = a => b => a + b
    // var addA = calc(2)
    // console.log(addA(4))

    // var calc = function(a) {

    //     return function(b) {

    //         return a + b
    //     }
    // }
    // var addA = calc(2);
    // console.log(addA(3))

    // var a = 1;

    // function calc() {
    //     ++a
    //     console.log(a)
    // }
    // calc()
    // calc()
    // var str = 'a_bc'

    // function strTransform(str) {
    //     return str => str.replace(/_[a-z]{1}/g, m => m.replace('_', '').toLocaleUpperCase())

    // }
    // console.log(strTransform('ab_x'))
</script>